<template>
  <el-dialog
    title="客户详情"
    width="72%"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form class="query-form" :inline="true" :model="params">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="showDetail"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          @change="showDetail"
          clearable
          placeholder="机构名称查询"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showDetail" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table border v-loading="loading" :data="tableData">
      <el-table-column
        align="center"
        label="企业名称"
        prop="customer_name"
        min-width="120"
      ></el-table-column>
      <el-table-column label="地址" align="center" min-width="120">
        <template slot-scope="scope">
          <span class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="法人"
        prop="corp_name"
        min-width="60"
      ></el-table-column>
      <el-table-column align="center" label="联系电话" prop="mobile_no"></el-table-column>
      <el-table-column align="center" label="业务类型" prop="guaType"></el-table-column>
      <el-table-column
        align="center"
        :label="`批复金额${customerAmout}万元`"
        prop="reply_funds"
      ></el-table-column>
      <el-table-column align="center" label="在保余额" prop="left_funds"></el-table-column>
    </el-table>
    <div class="query-pagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectAddress from '@/components/select/SelectAddress'
import { enumGuatype } from '@/credit/plugins/enumTown'
export default {
  components: {
    SelectAddress,
  },
  props: {
    visible: Boolean,
    itemData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      enumGuatype,
      customerAmout: 0,
      loading: false,
      params: {
        index: 1,
        size: 10,
        'loan_notice_status.eq': 2,
        'load_beh_status.gt': 0,
      },
      tableData: [],
      totalCount: 0,
    }
  },
  computed: {
    ...mapGetters(['user']),
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
  },
  watch: {
    itemData: {
      handler: function () {
        this.showDetail()
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    showDetail() {
      this.loading = true
      this.customerAmout = 0
      if (this.isUserTown) {
        this.params['service_id.eq'] = this.itemData.agency_id
      } else if (this.user.orgRegionLever === 1) {
        this.params['orWhere.service_id.eq'] = this.itemData.agency_id
        this.params['orWhere.recommend_service.eq'] = this.itemData.agency_id
        this.params['orWhere.pro_service.eq'] = this.itemData.agency_id
      } else {
        this.params['orWhere.service_id.eq'] = this.itemData.agency_id
        this.params['orWhere.recommend_service.eq'] = this.itemData.agency_id
      }
      this.getData()
      const { index, size, ...params } = this.params
      this.$api
        .getData(this.$serviceName, 'customer_related', {
          ...params,
          groupFunc: 'SUM(reply_funds)',
        })
        .then(res => {
          this.customerAmout = (res && res.data && res.data[0].p) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData() {
      this.$api
        .getData('credit', 'customer_related', this.params, {
          create_time: 'desc',
        })
        .then(res => {
          const data = (res && res.data && res.data.data) || []
          this.tableData = data.map(item => this.dataAdapter(item))
          this.totalCount = res.data.totalCount || 0
        })
    },
    dataAdapter(item) {
      item.guaType = enumGuatype[item.gua_type] || '-'
      return item
    },
  },
}
</script>
<style lang="scss" scoped></style>
